import React, { PureComponent } from 'react';
// 引入样式
import './scss/bulletChat.scss';
import { Button, Input, message } from 'antd';
export default class BulletChat extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 弹幕切换
      isbullet: false,
      // 弹幕内容
      inputText: '',
      // 弹幕大小
      inputSize: '11',
      // 弹幕颜色
      inputColor: '#ffffff',
      // 弹幕背景
      backColor: '#000000',
      // 弹幕速度
      inputSpeed: '6',
      // 弹幕样式
      inputStyle: 1
    }
  }
  // 操作和界面互相转换
  trueText = () => {
    let { inputText } = this.state;
    // 判断没有就提示
    if (!inputText) {
      message.info({ content: '弹幕必须有内容', className: 'bulletChatMessage' });
      return;
    }
    this.setState({
      isbullet: true
    })
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 改变样式
  typeStyle = (int) => {
    this.setState({
      inputStyle: int
    })
  }
  render () {
    let { isbullet, inputText, inputSize, inputColor, backColor, inputSpeed, inputStyle } = this.state;
    return (
      <div className='bulletChat'>
        {
          isbullet ?
            // 弹幕显示
            <div className='bulletChat_text' style={{ background: backColor }}>
              <span className='bulletChat_textTrou' style={{ color: inputColor, fontSize: `${inputSize}rem`, animation: `myfirst ${inputSpeed}s linear infinite`, fontStyle: inputStyle === 2 ? 'italic' : 'normal', textDecoration: inputStyle === 4 ? 'line-through' : 'normal', fontWeight: inputStyle === 3 ? '800' : '600' }}>{inputText}</span>
            </div>
            :
            // 弹幕操作台
            <div className='bulletChat_body'>
              <ul className='bulletChat_body_ul'>
                <li>
                  <h4><span style={{ color: 'red', marginRight: '5px' }}>*</span>弹幕内容（最少有一个字）</h4>
                  <Input placeholder="弹幕内容" className='bulletChat_body_ul_input' value={inputText} name='inputText' onChange={this.handleInput} autoComplete="off" maxLength='10' />
                </li>
                <li>
                  <h4>弹幕大小（默认大小为11rem）</h4>
                  <Input placeholder="弹幕大小" className='bulletChat_body_ul_input' value={inputSize} name='inputSize' onChange={this.handleInput} autoComplete="off" maxLength='40' />
                </li>
                <li>
                  <h4>弹幕样式（默认为正楷体）</h4>
                  <ul className='bulletChat_body_ul_style'>
                    <li style={{ fontStyle: 'normal' }} onClick={() => this.typeStyle(1)} className={inputStyle === 1 ? 'textStyleBorder' : ''}>楷体</li>
                    <li style={{ fontStyle: 'italic' }} onClick={() => this.typeStyle(2)} className={inputStyle === 2 ? 'textStyleBorder' : ''}>斜体</li>
                    <li style={{ fontWeight: '800' }} onClick={() => this.typeStyle(3)} className={inputStyle === 3 ? 'textStyleBorder' : ''}>加粗</li>
                    <li style={{ textDecoration: 'line-through' }} onClick={() => this.typeStyle(4)} className={inputStyle === 4 ? 'textStyleBorder' : ''}>贯穿</li>
                  </ul>
                </li>
                <li>
                  <h4>弹幕颜色（默认为白色）</h4>
                  <div className='bulletChat_body_ul_color'>
                    <input type="color" name='inputColor' value={inputColor} onChange={this.handleInput} />
                    <h2>弹幕颜色为：{inputColor}</h2>
                  </div>
                </li>
                <li>
                  <h4>弹幕背景（默认为黑色）</h4>
                  <div className='bulletChat_body_ul_color'>
                    <input type="color" name='backColor' value={backColor} onChange={this.handleInput} />
                    <h2>弹幕背景为：{backColor}</h2>
                  </div>
                </li>
                <li>
                  <h4>弹幕速度（数越小速度越快）</h4>
                  <Input placeholder="弹幕速度" className='bulletChat_body_ul_input' value={inputSpeed} name='inputSpeed' onChange={this.handleInput} autoComplete="off" maxLength='40' />
                </li>
                <li>
                  <Button onClick={this.trueText} className='bulletChat_body_ul_button'>生成弹幕</Button>
                </li>
              </ul>
            </div>
        }
      </div>
    )
  }
}